<template>
  <div>
    <a-drawer
      :title="title"
      :width="drawerWidth"
      @close="handleClose"
      :visible="visible"
      :confirmLoading="confirmLoading"
    >
      <div
        :style="{
          width: '100%',
          border: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
        }"
      >
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="ruleForm" :model="model" :rules="rules">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="用户厂名称"
              prop="identify"
              hasFeedback
            >
              <a-input placeholder="请输入用户厂名称" v-model.trim="identify" />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="上传文件"
              prop="file"
              hasFeedback
            >
              <a-upload
                name="file"
                :customRequest="uploadRequest"
              >
                <a-button><a-icon type="upload" /> 上传 </a-button>
              </a-upload>
            </a-form-model-item>

          </a-form-model>
        </a-spin>
        <a-row :style="{ textAlign: 'right' }">
          <a-button :style="{ marginRight: '8px' }" @click="handleClose">
            关闭
          </a-button>
          <a-button @click="handleOk" type="primary">确定</a-button>
        </a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import api from "@/api/apiServer";

export default {
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      drawerWidth: 700, // 抽屉宽度
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元素
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      identify: '',
      fd: new FormData(),
    };
  },
  watch: {
    checkedKeys(val) {
    },
  },
  computed: {
    rules() {
      return {
        name: [{ required: true, message: "请输入菜单标题!" }],
        component: [{ required: this.show, message: "请输入前端组件!" }],
        url: [{ required: this.show, message: "请输入菜单路径!" }],
        permsType: [{ required: true, message: "请输入授权策略!" }],
        perms: [
          { required: false, message: "请输入授权标识!" },
          { validator: this.validatePerms },
        ],
      };
    },
  },
  methods: {
    uploadRequest(obj){
      debugger
      let { file } = obj;
      let typeReg = /^apk/;
      // if (!typeReg.test(file.type)) {
      //   this.$message.error('请上传app文件');
      //   return false;
      // }
      
      this.fd.append('file', file);
    },
    // 新增
    async modalAdd() {
      this.modalEdit({
        status: "1",
        permsType: "1",
        sortNo: 1.0,
        route: true,
        menuType: 0,
      });
    },
    // 编辑
    async modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    async handleOk() {
      debugger
      this.fd.append('identify', this.identify);
      const res = await api.uploadApk(this.fd);
      if(res.code !== 200){
        this.$message.error('请上传app文件');
      }else{
        // app.findListByIdentify();
        this.$message.success('上传app文件成功');
        this.visible = false;
      }
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style></style>
